<template>
	<view class="content">
		<image :src="beijingImg" class="beijing-img" mode="widthFix"></image>
		<view class="title-view" :style="{'margin-top':magringTopTitle+'px'}">
			<view style="flex: 1;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding-left: 15px;">
				<image @click="goback" :src="leftjiantouBlack" style="width: 16px;" mode="widthFix"></image>
			</view>
			<view style="flex: 2;text-align: center;line-height: 35px;">
				{{title}}
			</view>
			<view style="flex: 1;"></view>
		</view>
		<view class="kefu-title">客服工作时间</view>
		<view class="kefu-tip">工作日 9:00～12:00，14:00</view>
		<view class="kefu-box">
			<view class="kefu-box-item">
				<image class="kefu-box-item-img" :src="kefuImg01" mode=""></image>
				<view class="kefu-item-text">电话客服</view>
			</view>
			<view class="kefu-box-item">
				<image class="kefu-box-item-img" :src="kefuImg02" mode=""></image>
				<view class="kefu-item-text">在线客服</view>
			</view>
		</view>
		<image style="width: 100%;" :src="beijing03" mode="widthFix" ></image>
		<view class="changjian-quest">
			<view class="changjian-quest-title">常见问题</view>
			<view class="changjian-quest-content">
				<view v-for="(item,index) in questArray" :key="index">
					<view class="changjian-quest-content-top" @click="questArray[index].open = !questArray[index].open">
						<view>{{index+1}}.{{item.question[0].title}}</view> 
						<image v-if="!item.open" style="width: 10px;height: 10px;" :src="righthuiImg01" mode=""></image> 
						<image v-if="item.open" style="width: 10px;height: 10px;" :src="righthuiImg02" mode=""></image>
					</view>
					<rich-text v-if="item.open" class="changjian-quest-content-bottom" :nodes="item.question[0].content"></rich-text> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				title:'帮助中心',
				leftjiantouBlack:baseUrl+'/uploads/static/image/left-black.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				beijingImg:baseUrl+'/uploads/static/image/recovery_help_bg@2x.png',
				beijing03:baseUrl+'/uploads/static/image/recovery_index_reserve_bg_03@2x.png',
				kefuImg01:baseUrl+'/uploads/static/image/recovery_recycler_icon_iphone@2x.png',
				kefuImg02:baseUrl+'/uploads/static/image/recovery_recycler_icon_service@2x.png',
				righthuiImg01:baseUrl+'/uploads/static/image/recovery_help_img_right@2x.png',
				righthuiImg02:baseUrl+'/uploads/static/image/recovery_help_img_up@2x.png',
				questArray:[
					{
						"questiontype_id": 2,
						"id": 2,
						"title": "在哪里可以找到客服",//标题
						"content": "<p>在哪里可以找到客服在哪里可以找到客服在哪里可以找到客服在哪里可以找到客服在哪里可以找到客服<br></p>",//内容
						"weigh": 2
					},
					{
						ask:'账户密码忘记了怎么办？',
						asktext:'不要问提现的问题，再问大表姐就要发烂砸',
						open:false
					},
					{
						ask:'为什么提现了没有马上到账？',
						asktext:'不要问提现的问题，再问大表姐就要发烂砸',
						open:false
					},
					{
						ask:'如何修改评价内容？',
						asktext:'不要问提现的问题，再问大表姐就要发烂砸',
						open:false
					}
				],
				magringTopTitle:0
			}
		},
		onLoad() {
			//计算右上角高度
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			 this.magringTopTitle = menuButtonInfo.top
			
			this.getQuestionFun()
		},
		methods:{
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			getQuestionFun(){
				http.getQuestion().then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						let data = res.data.data 
						for(let i = 0;i<data.length;i++){
							data[i].open = false
						}
						this.questArray = data
					}
					console.log(this.questArray)
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.title-view{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #333;
		font-weight: bold;
		display: flex;
	}
	.beijing-img{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.kefu-title{width: 100%;box-sizing: border-box;padding-left: 22px;font-size: 18px;color: #333;margin-top: 36px;}
	.kefu-tip{width: 100%;box-sizing: border-box;padding-left: 22px;font-size: 12px;color: #333;margin-top: 10px;}
	.kefu-box{width: calc(100% - 24px);margin: 0 auto;background: #fff;border-radius: 10px 10px 0 0;display: flex;flex-direction: row;box-sizing: border-box;padding-top: 22.5px; margin-top: 25px;}
	.kefu-box-item{flex: 1;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.kefu-box-item-img{width: 35px;height: 35px;}
	.kefu-item-text{font-size: 14px;color: #333;margin-top: 5px;}
	.changjian-quest{width: 100%;box-sizing: border-box;padding: 0 20px;margin-top: 30px;}
	.changjian-quest-title{width: 90%;border-left: 2px solid #00CB8B;height: 17px;font-size: 18px;line-height: 17px;box-sizing: border-box;padding-left: 9px;}
	.changjian-quest-content{width: 100%;box-sizing: border-box;padding:0 10px;}
	.changjian-quest-content-top{margin-top: 30px;font-size: 14px;color: #333;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.changjian-quest-content-bottom{margin-top: 20px;font-size: 14px;color: #999;box-sizing: border-box;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2;}
</style>